<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataBrowser.aspx.cs" Inherits="Ogdi.InteractiveSdk.WebForms.Forms.DataBrowserForm"
    MasterPageFile="~/InteractiveSdk.Master" %>

<asp:Content ID="head" runat="server" ContentPlaceHolderID="head">

    <script type="text/javascript">
        var uriLabelClientID = "<%= uriLabel.ClientID %>";
        var queryBoxClientID = "<%= queryBox.ClientID %>";
        var updateProgressClientID = "<%= updateProgress.ClientID %>";
        var dataSampleCodeDivClientID = "<%= dataSampleCodeLiteral.ClientID %>";
        var mapSampleCodeDivClientID = "<%= mapSampleCodeLiteral.ClientID %>";
        var errorPanelClientID = "<%= errorPanel.ClientID %>";
    </script>

    <style type="text/css">
        .style6
        {
            width: 503px;
        }
    </style>
</asp:Content>
<asp:Content ID="content" runat="server" ContentPlaceHolderID="contentPlaceholder">
    <asp:ScriptManagerProxy ID="scriptManagerProxy" runat="server">
        <Scripts>
            <asp:ScriptReference Path="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" />
            <asp:ScriptReference Path="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" />
            <asp:ScriptReference Path="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" />
            <asp:ScriptReference Path="~/js/jquery.clipboard.min.js" />
            <asp:ScriptReference Path="~/DataBrowser.aspx.js" />
        </Scripts>
    </asp:ScriptManagerProxy>
    <h1>
        Data Browser</h1>
    <div>
        <asp:Panel ID="TitlePanel" runat="server" CssClass="collapsePanelHeader" ToolTip="Click for more details..."
            EnableViewState="False">
            <p class="big">
                Interact with the data you selected. Enter filter expression into a text box (text
                edit area) below and click Run. If you leave the Filter Expression box blank, your
                query will return all of the data in the selected data set.<%-- Section 508 - Added alternate and descriptive text for image and changed asp:image to asp:imagebutton to set focus on control--%><asp:ImageButton
                    ID="Image1" runat="server" ImageUrl="~/images/expand.jpg" EnableViewState="False"
                    AlternateText="control which gives more detail" DescriptionUrl="~/desc/Expand.txt"
                    OnClientClick="return false;" />
            </p>
        </asp:Panel>
        <asp:Panel ID="ContentPanel" runat="server" CssClass="collapsePanel" EnableViewState="False">
            <p class="big" style="margin: 0px; padding-top: 0px;">
                The results of your query will be shown in tabular format in the Data column. If
                your query returned KML data, the Map tab will show the geospatial data returned
                by your query on a [Virtual Earth] map. The Code tab provides complete, working
                sample code for your query for a number of popular development environments.</p>
        </asp:Panel>
        <%-- Section 508 - Added ExpandedText and  CollapsedText--%><ajaxToolkit:CollapsiblePanelExtender
            ID="cpe" runat="Server" TargetControlID="ContentPanel" ExpandControlID="TitlePanel"
            CollapseControlID="TitlePanel" CollapsedSize="0" ExpandedSize="90" Collapsed="True"
            AutoCollapse="False" AutoExpand="False" CollapsedText="Show Details" ExpandedText="Hide Details"
            ScrollContents="False" TextLabelID="Label1" ImageControlID="Image1" ExpandedImage="~/images/collapse.jpg"
            CollapsedImage="~/images/expand.jpg" ExpandDirection="Vertical" EnableViewState="False" />
    </div>
    <asp:UpdatePanel ID="errorUpdatePanel" runat="server" UpdateMode="Conditional" EnableViewState="False">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="runButton" EventName="Click" />
        </Triggers>
        <ContentTemplate>
            <asp:Panel ID="errorPanel" Visible="false" runat="server" EnableViewState="False">
                <p class="big" style="margin-top: -10px; margin-left: 25px">
                    <strong>
                        <asp:Label ID="errorLabel" runat="server" ForeColor="Red" EnableViewState="False" /></strong>
                    <br />
                    <asp:Label ID="errorDetailsLabel" runat="server" EnableViewState="False" />
                </p>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
    <table>
        <tr>
            <td class="leftcolumn">
                <b>Entity Set</b>:
            </td>
            <td class="style6">
                <asp:Label ID="entitySetLabel" runat="server" CssClass="maintext" EnableViewState="True" />
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td class="leftcolumn">
                <b>Base Query</b>:
            </td>
            <td class="style6">
                <asp:Label ID="uriLabel" runat="server" CssClass="maintext" EnableViewState="True" />
            </td>
            <td valign="bottom">
                <%-- Section 508 - Added alternate and descriptive text for image and changed asp:image to asp:imagebutton to set focus on control--%>
            </td>
        </tr>
        <tr>
            <td style="vertical-align: top;" class="leftcolumn">
                <b style="vertical-align: top">Filter Expression:</b>
                <div style="float: right; vertical-align: top">
                    <asp:ImageButton runat="server" ID="Imagehelp" ImageUrl="images/help.JPG" CssClass="filterhints"
                        OnClientClick="$('#filterDialog').dialog('open'); return false;" ToolTip="Show Filter Hints"
                        DescriptionUrl="desc/Filter.txt" />
                </div>
                <br />
                <b style="vertical-align: top">($filter) </b>&nbsp;&nbsp;<br />
                </br>
            </td>
            <td style="vertical-align: bottom" class="middlecolumn">
                <asp:TextBox ID="queryBox" runat="server" Width="580px" TextMode="MultiLine" CssClass="nice"
                    Height="48px" EnableViewState="False"></asp:TextBox>
                <ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server"
                    TargetControlID="queryBox" WatermarkText="(additional $filter parameters...)"
                    WatermarkCssClass="nice" EnableViewState="False">
                </ajaxToolkit:TextBoxWatermarkExtender>
            </td>
            <td valign="top">
                <%-- Old Code--%><%--  <asp:ImageButton runat="server" ID="Imagehelp" ImageUrl="images/help.JPG" CssClass="filterhints"
                    OnClientClick="$('#filterDialog').dialog('open'); return false;" ToolTip="Show Filter Hints"
                    DescriptionUrl="desc/Filter.txt" /><br />
                <br style="font-size: 5px" />--%><%-- Section 508 - Added alternate text for image--%><asp:ImageButton
                    ID="runButton" AlternateText="Run" ImageUrl="~/images/run.png" Width="80px" runat="server"
                    OnClick="runButton_Click" OnClientClick="runButtonClick()" EnableViewState="False" />
            </td>
        </tr>
        <tr>
            <td style="vertical-align: top;" class="leftcolumn">
                &nbsp;
            </td>
            <td style="vertical-align: bottom" class="middlecolumn">
                &nbsp;
            </td>
            <td valign="bottom">
                &nbsp;
            </td>
        </tr>
    </table>
    <!-- Tabs -->
    <div id="tabs" style="visibility: hidden;">
        <ul>
            <li><a href="#tabs-1">Data View</a></li>
            <li><a href="#tabs-2">Map View</a></li>
        </ul>
        <div id="tabs-1">
            <div id="dataViewAccordion">
                <h3 id="dataViewSampleCode">
                    <a href="#">Sample Code</a></h3>
                <div>
                    <div style="vertical-align: bottom; margin-top: 5px; float: left;">
                        Language/Environment:&#160;
                        <asp:DropDownList ID="languageBox" EnableViewState="True" runat="server" AutoPostBack="true"
                            OnSelectedIndexChanged="languageBox_SelectedIndexChange">
                            <asp:ListItem Text="C#/ASP.NET" Value="templates\SampleCode_CS.txt" />
                            <asp:ListItem Text="C#/ASP.NET Paging" Value="templates\SampleCode_CS_Paging.txt" />
                            <asp:ListItem Text="C#/Silverlight" Value="templates\SampleCode_CS_Silverlight.txt" />
                            <asp:ListItem Text="JavaScript" Value="templates\SampleCode_JS.txt" />
                            <asp:ListItem Text="PHP" Value="templates\SampleCode_PHP.txt" />
                            <asp:ListItem Text="Python" Value="templates\SampleCode_PYTHON.txt" />
                            <asp:ListItem Text="Ruby" Value="templates\SampleCode_RUBY.txt" />
                            <asp:ListItem Text="Flex" Value="templates\SampleCode_FLEX.txt" />
                        </asp:DropDownList>
                    </div>
                    <%-- Section 508 - Added alternate and descriptive text for image--%>&nbsp;&nbsp;<img
                        id="copyDataCodeButton" src="images/clipboard.jpg" class="copyicon" title="Copy to Clipboard"
                        alt="Clipboard image" longdesc="desc/Clipboard.txt" />
                    <br />
                    <asp:UpdatePanel ID="dataSampleCodeTabUpdatePanel" EnableViewState="False" runat="server"
                        UpdateMode="Conditional">
                        <ContentTemplate>
                            <div class="codesamplescroll">
                                <div id="dataSampleCodeLiteral" runat="server" />
                            </div>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="runButton" EventName="Click" />
                            <asp:AsyncPostBackTrigger ControlID="languageBox" EventName="SelectedIndexChanged" />
                        </Triggers>
                    </asp:UpdatePanel>
                </div>
                <h3 id="dataViewResults">
                    <a href="#">Results</a></h3>
                <div>
                    <asp:Panel HorizontalAlign="Right" runat="server" CssClass="DaisyLinks">
                        <%--Section 508 - Link which downloads the DAISY Xml --%>
                        <asp:LinkButton ID="LinkButton1" OnClick="DAISYLink_Click" EnableViewState="True"
                            runat="server">DOWNLOAD</asp:LinkButton>
                        result in <a href="http://www.daisy.org">DAISY</a>
                        <img src="/images/ExternalLink.png" alt="External Link for DAISY format" />
                        format
                    </asp:Panel>
                    <asp:UpdatePanel ID="dataResultsTabUpdatePanel" EnableViewState="True" runat="server"
                        UpdateMode="Conditional">
                        <ContentTemplate>
                            <asp:Panel ID="dataFullQueryUrlPanel" EnableViewState="False" runat="server" Visible="false">
                                <asp:Label ID="Label1" EnableViewState="False" runat="server" Text="Full Query URL:" />
                                &nbsp;<asp:HyperLink ID="dataFullQueryUrlHyperlink" EnableViewState="True" runat="server"
                                    Target="_blank" />
                                <br />
                                <div>
                                    (Click to view results as XML/Atom)</div>
                                <br />
                            </asp:Panel>
                            <div class="datascrollwide">
                                <%--Section 508 - Table which shows available entity sets --%>
                                <asp:Table ID="tblEntitySet" Width="100%" runat="server" CellSpacing="1" BorderWidth="1px"
                                    BackColor="#C0C0C0" BorderColor="#F0F0F0" CellPadding="2">
                                </asp:Table>
                                <%--Old code--%>
                                <%-- <asp:XmlDataSource ID="XmlDataSource1" XPath="Root/properties" EnableViewState="False"
                                    runat="server" EnableCaching="false"></asp:XmlDataSource>
                                <asp:GridView ID="dataResultsGrid" runat="server" AllowPaging="false" CssSelectorClass="PrettyGridView"
                                    EnableViewState="false" AutoGenerateColumns="false">
                                </asp:GridView>--%>
                            </div>
                            <div class="tablefooter">
                                <asp:LinkButton ID="PreviousLink" Enabled="false" OnClick="PreviousLink_Click" EnableViewState="True"
                                    runat="server">< Previous</asp:LinkButton>
                                &nbsp;<asp:LinkButton ID="NextLink" Enabled="false" OnClick="NextLink_Click" EnableViewState="True"
                                    runat="server">Next ></asp:LinkButton>
                            </div>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="runButton" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>
                </div>
            </div>
        </div>
        <div id="tabs-2">
            <div id="mapViewAccordion">
                <h3 id="mapViewSampleCode">
                    <a href="#">Sample Code</a></h3>
                <div>
                    <p>
                        NOTE: This is a working sample. You can copy / paste this code into an html file.
                        However, you must download the dependent jquery-1.3.1.min.js file for successful
                        execution. You can download jquery-1.3.1.min.js from <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.1.min.js&amp;downloadBtn=%3CSPAN%3EDownload%3C%2FSPAN%3E">
                            here</a>.</p>
                    <div style="vertical-align: bottom; margin-top: 5px; float: left;">
                        Language/Environment:&#160;
                        <asp:DropDownList ID="mapLanguageBox" EnableViewState="True" runat="server" AutoPostBack="true"
                            OnSelectedIndexChanged="maplanguageBox_SelectedIndexChange">
                            <asp:ListItem Text="Virtual Earth" Value="templates\SampleCode_MAP.txt" />
                            <asp:ListItem Text="Google Maps" Value="templates\SampleCode_JS_GoogleMaps.txt" />
                        </asp:DropDownList>
                    </div>
                    <%-- Section 508 - Added alternate and descriptive text for image--%>&nbsp;<img id="copyMapCodeButton"
                        src="images/clipboard.jpg" class="copyicon" title="Copy to Clipboard" alt="clipboard image"
                        longdesc="desc/Clipboard.txt" />
                    <br />
                    <asp:UpdatePanel ID="mapSampleCodeTabUpdatePanel" EnableViewState="False" runat="server"
                        UpdateMode="Conditional">
                        <ContentTemplate>
                            <div class="codesamplescroll">
                                <div id="mapSampleCodeLiteral" runat="server" />
                            </div>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="runButton" EventName="Click" />
                            <asp:AsyncPostBackTrigger ControlID="mapLanguageBox" EventName="SelectedIndexChanged" />
                        </Triggers>
                    </asp:UpdatePanel>
                </div>
                <h3 id="mapViewResults">
                    <a href="#">Results</a></h3>
                <div>
                    <div id="mapFullQueryPanel" style="display: none;">
                        <span>Full Query URL:</span> &nbsp;<a id="mapFullQueryUrlHyperlink" target="_blank"></a>
                        <br />
                        <div>
                            (Click to view results as XML/KML)</div>
                    </div>
                    <div id="mapNoResultsDiv" style="display: none;">
                        <span>Selected data does not have location information.</span>
                    </div>
                    <br />
                    <div id='myMap' class="veMapStyle">
                    </div>
                    <br />
                </div>
            </div>
        </div>
    </div>
    <asp:UpdateProgress ID="updateProgress" EnableViewState="False" runat="server">
        <ProgressTemplate>
            <asp:Panel ID="Panel1" EnableViewState="False" runat="server">
                <div class="loading">
                </div>
                <div class="loader">
                    <%-- Section 508 - Added descriptive text for image--%><img alt="loading..." src="images/loading2.gif"
                        longdesc="desc/Load.txt" />
                </div>
            </asp:Panel>
        </ProgressTemplate>
    </asp:UpdateProgress>
    <ajaxToolkit:AlwaysVisibleControlExtender ID="updateProgress_AlwaysVisibleControlExtender"
        EnableViewState="False" runat="server" Enabled="True" HorizontalSide="Center"
        TargetControlID="updateProgress" VerticalSide="Middle">
    </ajaxToolkit:AlwaysVisibleControlExtender>
    <div id="filterDialog" title="$filter hints" class="filterdialog" style="visibility: hidden;">
        <p>
            OGDI uses a subset of the <a href="http://msdn.microsoft.com/en-us/library/cc668784.aspx">
                ADO.NET Data Services query syntax</a><%-- Section 508 - Added alternate and descriptive text for image--%><img
                    src="/images/ExternalLink.png" alt="External link for ADO.NET Data Services query syntax"
                    longdesc="desc/ADOquerysyntax.txt" />. The basic format of a filter expression
            is <i>property</i>&nbsp;<i>comparison</i>&nbsp;<i>expression</i>, where <i>property</i>
            is the name of a property, <i>comparison</i> is a comparison operator, and <i>expression</i>
            is the expression with which the property's value should be compared.
        </p>
        <p>
            Some examples of filter expressions using the CrimeIncidents data set from the DC
            container are:</p>
        <table width="100%">
            <tr>
                <td style="vertical-align: top">
                    method eq 2
                </td>
                <td style="vertical-align: top">
                    <p>
                        Crime incidents where the method code is equal to 2. Other comparison operators
                        include &quot;gt&quot; for greater than, &quot;lt&quot; for less than, &quot;ge&quot;
                        for greater than or equal to, and &quot;le&quot; for less than or equal to.</p>
                </td>
            </tr>
            <tr>
                <td style="vertical-align: top">
                    shift eq 'EVN'
                </td>
                <td style="vertical-align: top">
                    <p>
                        Crime incidents where the &quot;shift&quot; property is equal to &quot;EVN&quot;.
                        String literals must be enclosed in single quotes. Boolean literals are represented
                        as &quot;true&quot; or &quot;false&quot; (without the double quotes).</p>
                </td>
            </tr>
            <tr>
                <td style="vertical-align: top">
                    reportdatetime ge datetime'2008-06-01T00:00:00Z'
                </td>
                <td style="vertical-align: top">
                    <p>
                        Crime incidents where the report date/time is on or after midnight, June 1, 2008,
                        UTC. Date/time literals are expressed in <a href="http://en.wikipedia.org/wiki/ISO_8601"
                            target="_blank">ISO 8601</a><%-- Section 508 - Added alternate and descriptive text for image--%><img
                                src="/images/ExternalLink.png" alt="External link for ISO 8601" longdesc="desc/Iso.txt" />
                        format, <i>yyyy</i>-<i>mm</i>-<i>dd</i>T<i>HH</i>:<i>MM</i>:<i>SS</i>, where <i>yyyy</i>
                        is the four-digit year, <i>mm</i> is the two-digit month number, <i>dd</i> is the
                        two-digit day of the month, <i>HH</i> is the two-digit hour (in 24-hour format),
                        <i>MM</i> is the two-digit minute, and <i>SS</i> is the two-digit second.</p>
                </td>
            </tr>
            <tr>
                <td style="vertical-align: top">
                    (shift eq 'EVN') or (shift eq 'MID')
                </td>
                <td style="vertical-align: top">
                    <p>
                        Crime incidents where the shift is equal to &quot;EVN;&quot or &quot;MID&quot;.
                        The filter syntax supports the &quot;and&quot;, &quot;or&quot;, and &quot;not&quot;
                        logical operators. Expressions can grouped with parentheses, as in many popular
                        programming languages.</p>
                </td>
            </tr>
        </table>
    </div>
</asp:Content>
